<template>
  <div>
    <div class="head">
      <el-row>
        <el-col :span="6">
          <el-input placeholder="请输入内容" v-model="getDataPar.keyword" class="input-with-select">
            <el-button slot="append" @click="conditionSearch" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="1" :offset="1">
          <el-button type="warning" icon="el-icon-refresh" @click="handleRef">重置</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="table">
      <el-table height="410px" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" :data="tableData" :border="true" stripe style="width: 100%">
        <el-table-column prop="register" label="注册时间" min-width="120"> </el-table-column>
        <el-table-column prop="nickName" label="昵称" min-width="120"> </el-table-column>
        <el-table-column prop="acc_number" label="账号" min-width="150"> </el-table-column>
        <el-table-column prop="gender" label="性别" min-width="70"> </el-table-column>
        <el-table-column prop="phone" label="联系电话" min-width="100"> </el-table-column>
        <el-table-column prop="address" label="地址" min-width="150"> </el-table-column>
        <el-table-column prop="birthday" label="生日" min-width="120"> </el-table-column>
        <el-table-column prop="avatar" label="头像" min-width="100">
          <template slot-scope="scoped">
            <el-avatar fit="cover" :size="68" :src="scoped.row.avatar"></el-avatar>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="getDataPar.currentPage" :page-sizes="[15, 30, 50, 100]" :page-size="getDataPar.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
    </div>
  </div>
</template>

<script>
import { geWuserList } from '@/api/adminApi.js'

export default {
  data() {
    return {
      loading: true,
      tableData: [],
      getDataPar: {
        pageSize: 15,
        currentPage: 1,
        keyword: '',
      },
      total: 0,
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      geWuserList(this.getDataPar).then((res) => {
        if (res.data.code != 200) return this.$message.error('数据请求失败')
        this.loading = false
        this.tableData = res.data.data.records
        this.total = res.data.data.total
        this.tableData.forEach((item) => {
          item.register = this.$moment(item.register).format('YYYY-MM-DD HH:mm:ss')
          item.birthday = this.$moment(item.birthday).format('YYYY-MM-DD HH:mm:ss')
        })
      })
    },
    handleSelectionChange(val) {
      this.selectTableRow = val
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.getDataPar.pageSize = val
      this.getDataPar.currentPage = 1
      this.getData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.getDataPar.currentPage = val
      this.getData()
    },
    //重置条件筛选
    handleRef() {
      this.getDataPar = {
        pageSize: 15,
        currentPage: 1,
        keyword: '',
      }
      this.getData()
    },
    //关键字、性别、时间筛选
    conditionSearch() {
      this.getData()
    },
  },
}
</script>

<style lang="less" scoped>
.block {
  margin-top: 15px;
}
</style>